<template>
  <div id="buy_car">
    <HeaderStatus v-on:header_func="open_del_box"></HeaderStatus>
    <div class="mui-content">
      <div class="shop_list">
        <div class="shop_item" v-for="(i,k) in list">
          <div class="title">
            <!--<i class="icon icon_checked fl" ></i>-->
            <span>
                            <span class="fl" style="padding-left: 0.8rem">{{i.name}}<i
                              class="mui-icon mui-icon-arrowright"
                              style="color: #8a8a8a;font-size:0.7973rem ;"></i></span>
              <!--<b class="fl"></b>-->
                        </span>
          </div>
          <div class="goods_list">
            <div class="goods_item" v-for="(i2,k2) in i.goods">
              <i @tap="check_this_goods(k,k2)" :class="i2.checked?'icon icon_checked fl':'icon  fl'"></i>
              <div class="img fl">
                <img :src="i2.pic" alt="">
              </div>
              <div class="info fl">
                <div class="goods_title" style="    display: -webkit-box;
    -webkit-box-orient: vertical;">{{i2.name}}</div>
                <p style="font-size: 0.5rem;">规格：{{i2.rule}}</p>
                <div class="price">￥{{i2.min_price}}</div>
                <div class="cout_box">
                  <span @tap="cut_this_goods_num(k,k2)">-</span>
                  <span>{{i2.num}}</span>
                  <span @tap="add_this_goods_num(k,k2)">+</span>
                </div>
              </div>
            </div>

          </div>
        </div>
      </div>
      <div class="select_all" v-show="show_del_box">
        <a>
          <i  @tap="check_all" :class="is_check_all?'icon icon_checked fl':'icon fl'"></i>
          <span>全选</span>
        </a>
        <button @tap="del_buy_car">删除</button>
        <!--<button>移入收藏夹</button>-->
      </div>
      <div class="select_all" v-show="!show_del_box">
        <a>
          <i @tap="check_all" :class="is_check_all?'icon icon_checked fl':'icon fl'"></i>
          <span>全选</span>
        </a>
        <button class="jiesuan" @tap="to_confirm_view()">结算</button>
        <button class="all_price">合计:
          <span style="color: #ff0000">￥{{count_price}}</span>
        </button>
      </div>
    </div>
  </div>
</template>
<script>
  import HeaderStatus from '../../components/Header';
  import goods_ajax from "../../ajax/goods_ajax";

  export default {
    name: 'buy_car',
    data() {
      return {
        show_del_box: false,
        list: [],
        is_check_all: false,
        checked_list: [],
        count_p:0,
        count_num:0
      }
    },
    created() {

      this.$store.commit("change_header", {
        header_text: '购物车',
        header_right_func: true,
        header_right_html: "<span>管理</span>",
        header_back_btn: 0
      })
      this.get_car_list()
    },
    methods: {
      // 打开删除框
      open_del_box() {
        if (this.show_del_box) {
          // 关闭删除框
          this.$store.commit("change_header", {
            header_back_btn: false,
            header_text: '购物车',
            header_right_func: 'open_del_box',
            header_right_html: "<span>管理</span>"
          })
          this.show_del_box = false
        } else {
          // 打开关闭框
          this.$store.commit("change_header", {
            header_text: '购物车',
            header_right_func: 'open_del_box',
            header_right_html: "<span>完成</span>"
          })
          this.show_del_box = true;
        }
      },
      del_buy_car(){
        console.log(this.checked_list)
        let cartid = '';
        for (let i = 0; i < this.checked_list.length; i++) {
          cartid += this.checked_list[i].cartid+","
        };
        cartid = cartid.substring(0,cartid.length-1);

        goods_ajax.del_buy_car({
          uid:this.$store.state.account.user_info.uid,
          cartid:cartid
        },res=>{
          if(res){
            mui.toast("删除成功");
            this.get_car_list()
          }
        })
      },
      // 获取购物车列表
      get_car_list() {
        goods_ajax.get_car_list({
          uid: this.$store.state.account.user_info.uid
        }, res => {
          console.log(res)

          this.list = res;
        })
      },
      // 选中/取消选中当前商品
      check_this_goods(k, k2) {
        if (this.list[k].goods[k2].checked) {
          // 取消选中
          this.$set(this.list[k].goods[k2], 'checked', false)
          for (let i = 0; i < this.checked_list.length; i++) {
            if (this.checked_list[i].cartid == this.list[k].goods[k2].cartid) {
              this.checked_list.splice(i, 1)
            }
          }
        } else {
          // 选中
          this.$set(this.list[k].goods[k2], 'checked', true)
          this.checked_list.push(this.list[k].goods[k2]);
        }
        console.log(this.checked_list)
      },
      // 全选/取消全选
      check_all() {
        if (this.is_check_all) {
          // 取消全选
          for (let i = 0; i < this.list.length; i++) {
            // 循环社区
            for (let j = 0; j < this.list[i].goods.length; j++) {
              // 循环商品
              let goods = this.list[i].goods[j];
              this.list[i].goods[j].checked = false;
            }
          }
          this.checked_list = [];
          this.is_check_all = false;
          return;
        }
        let arr = [];
        for (let i = 0; i < this.list.length; i++) {
          // 循环社区
          for (let j = 0; j < this.list[i].goods.length; j++) {
            // 循环商品
            let goods = this.list[i].goods[j];
            this.list[i].goods[j].checked = true;
            arr.push(goods)
          }
        }
        this.checked_list = arr;
        this.is_check_all = true;

      },
      // 添加数量
      add_this_goods_num(k,k2){
        let goods = this.list[k].goods[k2];
        this.$set(this.list[k].goods[k2],'num',++goods.num);
      },
      // 减少数量
      cut_this_goods_num(k,k2){
        let goods = this.list[k].goods[k2];
        if(goods.num<=1){
          return
        }
        this.$set(this.list[k].goods[k2],'num',--goods.num);
      },
      // 去结算
      to_confirm_view(){
        if(this.checked_list.length>0){
          this.$store.commit("save_buy_car_info",{
            count_num:this.count_num,
            count_price:this.count_p,
            goods_list:this.checked_list
          })
          this.$router.push("/shop/goods_list/goods/confirm_car")
        }else {
          mui.toast('请选择结算商品')
        }

      }
    },
    computed: {
      count_price() {
        let price = 0;
        let num = 0;
        for (let j = 0; j < this.checked_list.length; j++) {
          // 循环商品
          let p = parseFloat(this.checked_list[j].min_price);
          let n = parseInt(this.checked_list[j].num);
          let c = ((p * 100) * n) / 100;
          num+=n;
          price += c;
        }
        this.count_p = price.toFixed(2);
        this.count_num = num;
        return price.toFixed(2);
      },

    },
    components: {
      HeaderStatus
    }
  }
</script>
<style lang="less" scoped>
  @import "../../../static/pxvalue.less";

  #buy_car {
    height: 100%;
  }

  .mui-content {
    height: 100%;
  }

  .fl {
    float: left;
  }

  .fr {
    float: right;
  }

  .mui-action-back {
    height: 44px;
    width: 44px;
  }

  .mui-action-back img {
    width: 100%;
  }

  .mui-bar-nav {
    top: 20px;
  }

  .mui-content {
    padding-bottom: 100px;
    padding-top: 50px !important;
  }

  .mui-title {
    font-size: 0.768rem;
  }

  .mui-bar-nav a {
    font-size: 0.5973rem;
    color: #888888;
    line-height: 44px;
  }

  .shop_list {
    padding: 0.4693rem 0.64rem;
  }

  .shop_list .shop_item {
    width: 100%;
    background-color: #fafafa;
    min-height: 100px;
    border-radius: 5px;
    box-shadow: 0 0 5px #ededed;
    margin-bottom: 0.4693rem;
  }

  .shop_list .shop_item .title {
    width: 100%;
    height: 1.536rem;
    line-height: 1.536rem;
    background-color: #ffffff;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    font-size: 0.5973rem;
  }

  .shop_list .shop_item .title .icon {
    width: 0.8747rem;
    height: 0.8747rem;
    margin-top: 0.32rem;
    background-image: url(../../assets/images/buycar/car_10.png);
    background-size: 100% 100%;
    margin-left: 0.4693rem;
    margin-right: 0.5547rem;
  }

  .shop_list .shop_item .title .icon_checked {
    background-image: url(../../assets/images/buycar/car_07.png);
  }

  .shop_list .shop_item .title b {
    width: 0.2987rem;
    height: 0.4693rem;
    margin-top: 0.512rem;
    margin-left: 0.384rem;
    background-image: url(../../assets/images/buycar/car_03.png);
    background-size: 100% 100%;
  }

  .shop_list .shop_item .goods_list {
    padding: 0.64rem 0.4693rem;
    padding-bottom: 0;
    overflow: hidden;
  }

  .shop_list .shop_item .goods_list .goods_item {
    height: 3.4133rem;
    margin-bottom: 0.64rem;
  }

  .shop_list .shop_item .goods_list .goods_item .icon {
    width: 0.8747rem;
    height: 0.8747rem;
    margin-top: 1.2587rem;
    background-image: url(../../assets/images/buycar/car_10.png);
    background-size: 100% 100%;
    margin-right: 0.5547rem;
  }

  .shop_list .shop_item .goods_list .goods_item .icon_checked {
    background-image: url(../../assets/images/buycar/car_07.png);
  }

  .shop_list .shop_item .goods_list .goods_item .img {
    width: 3.4133rem;
    height: 3.4133rem;
    background-color: #ccc;
    margin-right: 0.4267rem;
    overflow: hidden;
  }

  .shop_list .shop_item .goods_list .goods_item .img img {
    width: 100%;
  }

  .shop_list .shop_item .goods_list .goods_item .info {
    width: 8.448rem;
    position: relative;
    height: 100%;
  }

  .shop_list .shop_item .goods_list .goods_item .info .goods_title {
    width: 100%;
    line-height: 1.0667rem;
    font-size: 0.5973rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
  }

  .shop_list .shop_item .goods_Specifications {
    width: 100%;
    line-height: 1.0667rem;
    font-size: 0.5973rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
  }

  .shop_list .shop_item .goods_list .goods_item .info .price {
    font-size: 0.5973rem;
    position: absolute;
    bottom: 0;
    left: 0;
  }

  .shop_list .shop_item .goods_list .goods_item .info .cout_box {
    width: 2.1333rem;
    height: 0.7973rem;
    border: 1px solid #d3d3d3;
    border-radius: 3px;
    font-size: 0.4693rem;
    line-height: 0.7973rem;
    position: absolute;
    right: 0;
    color: #888888;
    bottom: 0.2133rem;
  }

  .shop_list .shop_item .goods_list .goods_item .info .cout_box span {
    float: left;
    width: 33.3%;
    text-align: center;
  }

  .shop_list .shop_item .goods_list .goods_item .info .cout_box span:nth-child(2) {
    border-left: 1px solid #d3d3d3;
    border-right: 1px solid #d3d3d3;
  }

  .select_all {
    position: fixed;
    bottom: 51px;
    width: 100%;
    left: 0;
    height: 38px;
    font-size: 0.512rem;
    line-height: 38px;
    background-color: #ffffff;
    box-shadow: 0 0 6px #e3e3e3;
    padding-right: 0.64rem;
  }

  .select_all .icon {
    width: 0.8747rem;
    height: 0.8747rem;
    margin-top: 0.32rem;
    background-image: url(../../assets/images/buycar/car_10.png);
    background-size: 100% 100%;
    margin-left: 1.1093rem;
    margin-right: 0.5547rem;
  }

  .select_all .icon_checked {
    background-image: url(../../assets/images/buycar/car_07.png);
  }

  .select_all button {
    float: right;
    margin-top: 7px;
    margin-left: 8px;
    font-size: 0.512rem;
    color: #888888;
    height: 24px;
    line-height: 24px;
    padding: 0 0.5547rem;
    border-radius: 5px;
    border: 1px solid #888888;
  }

  .select_all .all_price {
    border: 1px solid transparent;
  }

  .select_all .jiesuan {
    background: linear-gradient(to right, #1cb5fc, #1c83fc);
    border: 1px solid transparent;
    color: #ffffff;
  }

</style>

